import 'package:flutter/material.dart';

class MyApp12 extends StatelessWidget {
  MyApp12({super.key});

  final Map goods = {
    "createTime": "2024-08-15 21:49:48",
    "orderState": "待发货",
    "image":
        "https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg",
    "name": "茶水分离杯耐热隔热玻璃杯",
    "totalNum": 2,
    "curPrice": 119.5,
    "totalMoney": 119.5,
    "attrsText": "规格:白色240ml"
  };
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        //导航条
        appBar: AppBar(
          title: const Text('商品订单',
              style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  color: Colors.white)),
          backgroundColor: Colors.pink,
          centerTitle: true,
        ),
        //主体区域
        body: Container(
          padding: EdgeInsets.all(10),
          width: MediaQuery.of(context).size.width,
          color: const Color.fromARGB(255, 180, 215, 219),
          child: Column(
            children: [
              //1.上部分
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('${goods['createTime']}'),
                  Text('${goods['orderState']}',
                      style: TextStyle(color: Colors.orange))
                ],
              ),
              //2.中间部分
              Padding(
                padding: EdgeInsets.only(top: 10, bottom: 10),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    //2.1 图片
                    Image.network(
                      '${goods['image']}',
                      width: 120,
                      height: 120,
                    ),
                    //2.2右侧
                    Expanded(
                        flex: 1,
                        child: Padding(
                          padding: EdgeInsets.only(left: 10),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              //2.2.1 第一行
                              Row(
                                children: [
                                  Expanded(
                                    child: Text(
                                        '${goods['name']}${goods['name']}'),
                                  ),
                                  const SizedBox(width: 10),
                                  Text('x ${goods['totalNum']}'),
                                ],
                              ),
                              const SizedBox(height: 10),
                              //2.2.2第二行
                              Container(
                                padding: const EdgeInsets.all(5),
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(5),
                                  color: Colors.grey,
                                ),
                                child: Text(
                                  '${goods['attrsText']}',
                                  style: TextStyle(color: Colors.white),
                                ),
                              ),
                              const SizedBox(height: 10),
                              //2.2.3第三行
                              Text('¥${goods['curPrice']}')
                            ],
                          ),
                        )),
                  ],
                ),
              ),
              //3.下部分
              Row(mainAxisAlignment: MainAxisAlignment.end, children: [
                Text('合计: ¥${goods['totalNum'] * goods['curPrice']}')
              ]),
              const SizedBox(height: 10),
              //4.按钮
              Row(mainAxisAlignment: MainAxisAlignment.end, children: [
                Expanded(
                    child: ElevatedButton(
                        onPressed: () {}, child: const Text('再次购买'))),
                const SizedBox(width: 10),
                Expanded(
                    child: ElevatedButton(
                  onPressed: () {},
                  child: const Text(
                    '取消订单',
                  ),
                )),
                const SizedBox(width: 10),
                Expanded(
                    child: ElevatedButton(
                  onPressed: () {},
                  child: const Text(
                    '去付款',
                  ),
                )),
              ])
            ],
          ),
        ));
  }
}
